<template>
  <div ref="dragComRef">
    <div
      class="w-full"
      v-for="(surveyGroup, index) in surveyComsList"
      :key="index"
    >
      <div class="mb-5">
        <!-- 分组标题和图标 -->
        <div class="font-medium mb-4 flex items-center">
          <component :is="surveyGroup.icon" style="width: 16px; height: 16px" />
          <div class="ml-2 text-sm">{{ surveyGroup.title }}</div>
        </div>
        <!-- 该分组对应的业务组件 -->
        <div>
          <SurveyItem :survey-item="surveyGroup.list" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ISurveyGroup } from "@/types/editor";
import SurveyItem from "./SurveyItem.vue";

defineProps<{
  surveyComsList: ISurveyGroup[];
}>();

</script>

<style lang="scss">
:deep(.ghost-item) {
  background: linear-gradient(45deg, #f0f9ff, #e0f2fe);
  border: 2px dashed #0ea5e9;
  opacity: 0.5;
  border: 2px dashed var(--x-border-color);
  background-color: var(--x-white);
}
</style>
